<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电梯导航</title>
    <style>
        .box1, .box2, .box3{
            width: 300px;
            height: 600px;
        }
        .box1{
            background-color: #2ECC71;
        }
        .box2{
            background-color: #3cadeb;
        }
        .box3{
            background-color: pink;
        }
        .slidebar{
            position: fixed;
            right: 0;
            top: 50%;


        }
        .slidebar a{
            text-decoration: none;
            color: #fff;
            display: block;
            width: 60px;
            height: 60px;
        }
        .slidebar a:nth-child(1){
            background-color: #2ECC71;
        }
        .slidebar a:nth-child(2){
            background-color: #3cadeb;
        }
        .slidebar a:nth-child(3){
            background-color: pink;
        }
        html{
            /*页面滚动条滑动*/
            scroll-behavior: smooth;
        }
        .slidebar .active{
            color: #3cadeb;
        }
    </style>
</head>
<body>
    <div class="box1 box" id="box1">服饰</div>
    <div class="box2 box" id="box2">家电</div>
    <div class="box3 box" id="box3">生鲜</div>

    <div class="slidebar">
        <a href="#box1">服饰</a>
        <a href="#box2">家电</a>
        <a href="#box3">生鲜</a>
    </div>
</body>
<script>
    window.onscroll = function () {
        //scrollTop就是触发滚轮事件时滚轮的高度
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        console.log("滚动距离" + scrollTop);
        const list = document.querySelectorAll('a');
        const list2 = document.querySelectorAll('.box');
        let index = 0
        for(let i=0;i<list.length;i++){
            console.log(list2[i].offsetTop)
            if(scrollTop>list2[i].offsetTop){
                index = i
            }
        }
        console.log(index)
        list.forEach(ele=>{
            ele.classList.remove('active')
        })
        list[index].classList.add('active')

    }
</script>
</html>
